<template>
    <div>
        <el-form-item label="名称" label-width="44px">
            <el-input v-model="attrDataInfo.formData.name" autocomplete="off" maxlength="20" :show-word-limit="false" clearable style="width:200px" @blur="validateName(attrDataInfo.formData.name)"></el-input>
        </el-form-item>
        <el-row>
            <el-col :span="12">
                <el-form-item label="X" label-width="44px">
                    <el-input v-model="attrDataInfo.formData.X" autocomplete="off" :disabled="attrDataInfo.formData.showType === 'Background'?true:false" clearable style="width:80px" @blur="changeAttr('xposition', attrDataInfo.formData.X)"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="Y" label-width="30px">
                    <el-input v-model="attrDataInfo.formData.Y" autocomplete="off" :disabled="attrDataInfo.formData.showType === 'Background'?true:false" clearable style="width:80px" @blur="changeAttr('yposition', attrDataInfo.formData.Y)"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
         <el-row>
            <el-col :span="12">
                <el-form-item label="W" label-width="44px">
                    <el-input v-model="attrDataInfo.formData.W" autocomplete="off" :disabled="attrDataInfo.formData.showType === 'Background'?true:false" clearable style="width:80px" @blur="changeAttr('wid', attrDataInfo.formData.W)"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="H" label-width="30px">
                    <el-input v-model="attrDataInfo.formData.H" autocomplete="off" :disabled="attrDataInfo.formData.showType === 'Background'?true:false" clearable style="width:80px" @blur="changeAttr('hei', attrDataInfo.formData.H)"></el-input>
                </el-form-item>
            </el-col>
         </el-row>
         <el-form-item label="Z" label-width="44px">
            <el-input v-model="attrDataInfo.formData.Z" autocomplete="off" maxlength="4" :show-word-limit="false" clearable style="width:200px" @blur="changeAttr('zindex', attrDataInfo.formData.Z)"></el-input>
        </el-form-item>
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    inject: ['attrDataInfo'],
    methods: {
        validateName(val) {
            const reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$/
            if (!reg.test(val)) {
                this.$message.error('名称输入不合法')
            }
            this.$eventBus.$emit('changeAttr', 'name', val)
        },
        changeAttr(type, val) {
            const p = /^[[0-9]+$/
            if(type === 'xposition' && val !== '') {
                if(!p.test(val)) {
                    this.$message.error('X坐标输入不合法')
                    return 
                }
            } else if(type === 'yposition' && val !== '') {
                if(!p.test(val)) {
                    this.$message.error('Y坐标输入不合法')
                    return 
                }
            } else if(type === 'wid' && val !== '') {
                if(!p.test(val)) {
                    this.$message.error('宽度输入不合法')
                    return 
                }
            } else if(type === 'hei' && val !== '') {
                if(!p.test(val)) {
                    this.$message.error('高度输入不合法')
                    return 
                }
            } else if(type === 'zindex' && val !== '') {
                if(!p.test(val)) {
                    this.$message.error('Z坐标输入不合法')
                    return 
                }
            }
            this.$eventBus.$emit('changeAttr', type, val)
        }
    }
}
</script>